<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<script src="rem.js" type="text/javascript"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.clearfix:after{
				content: "";
				display: block;
				line-height: 0;
				visibility: hidden;
			}
			.box-wrap{
				font-size: .36rem;
				text-align: center;
			}
			.box{
				float: left;
			}
			p{
				width: 2rem;
				height: 2rem;
				margin: .25rem;
				background: url(1.jpg) no-repeat;				
			}
			h3{
				color: red;
			}
			.box:nth-child(1) p{
				background-size: 300% 300%;				
				background-position: 0 0;
			}
			.box:nth-child(2) p{				
				background-size: 300% 300%;				
				background-position: 50% 0;
			}
			.box:nth-child(3) p{				
				background-size: 300% 300%;				
				background-position: 100% 0;
			}
			.box:nth-child(4) p{				
				background-size: 300% 300%;				
				background-position: 0 50%;
			}
			.box:nth-child(5) p{				
				background-size: 300% 300%;				
				background-position: 50% 50%;
			}
			.box:nth-child(6) p{				
				background-size: 300% 300%;				
				background-position: 100% 50%;
			}
			.box:nth-child(7) p{				
				background-size: 300% 300%;				
				background-position: 0 100%;
			}
			.box:nth-child(8) p{				
				background-size: 300% 300%;				
				background-position: 50% 100%;
			}
			.box:nth-child(9) p{				
				background-size: 300% 300%;				
				background-position: 100% 100%;
			}
		</style>
	</head>
	<body>
		<div class="box-wrap clearfix">
			<div class="box">
				<p></p>
				<h3>A</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>B</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>C</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>D</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>E</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>F</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>G</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>H</h3>
			</div>
			<div class="box">
				<p></p>
				<h3>I</h3>
			</div>			
		</div>
		
		
	</body>
</html>
